<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="./pic.css">
</head>

<body>
    <div class="wrapper">
        <ul class="init">
            <li>
                <div class="bg"></div>
                <h3>img1</h3>
                <div class="description">title1</div>
                <div class="close"></div>
            </li>
            <li>
                <div class="bg"></div>
                <h3>img2</h3>
                <div class="description">title2</div>
                <div class="close"></div>
            </li>
            <li>
                <div class="bg"></div>
                <h3>img3</h3>
                <div class="description">title3</div>
                <div class="close"></div>
            </li>
            <li>
                <div class="bg"></div>
                <h3>img4</h3>
                <div class="description">title4</div>
                <div class="close"></div>
            </li>
            <li>
                <div class="bg"></div>
                <h3>img5</h3>
                <div class="description">title5</div>
                <div class="close"></div>
            </li>
            <li>
                <div class="bg"></div>
                <h3>img6</h3>
                <div class="description">title6</div>
                <div class="close"></div>
            </li>
        </ul>
    </div>
    <script>
        var wrapper = document.getElementsByClassName('wrapper')[0]
        var ul = document.getElementsByTagName('ul')[0]
        var lis = [].slice.call(ul.children)
        var close_btns = document.getElementsByClassName('close')
        setTimeout(function () {
            ul.className = ''
        }, 300)

        var last;
        lis.forEach(function (item, index) {
            item.onclick = function () {
                last && (last.className = '')
                this.className = 'active'
                last = this
                ul.setAttribute('id', 'ul')
            }
            close_btns[index].onclick = function (e) {
                e.stopPropagation()
                console.log('close', item);
                item.className = ''
                ul.removeAttribute('id')
            }
        })

    </script>
</body>

</html>